
import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { Button } from 'antd';

const AuthButton = (props: any) => {
    let [hasPerm, setHasPerm] = useState<boolean>(false)
    let { auth, permissions, children } = props;
    useEffect(() => {
        if (auth && auth.length && permissions.length) {
            permissions.map((permission: string) => {
                auth.map((item: string) => {
                    if (permission == item) {
                        setHasPerm(true)
                    }
                })
            })
        }
    }, [auth])

    return (
        <Button {...children.props} disabled={!hasPerm} />
    )
}

const mapStateProps = (state: any) => {
    return {
        permissions: state.Global.permissions
    }
}

export default connect(mapStateProps)(AuthButton)
